<template>
  <div
    :class="[
      'el-row',
      justify !== 'start' ? `is-justify-${justify}` : '',
      align !== 'top' ? `is-align-${align}` : '',
      { 'el-row--flex': type === 'flex' },
      className,
    ]"
    :style="{ padding, margin, borderRadius: radius, width, height }"
  >
    <slot>
      {{ text }}
    </slot>
  </div>
</template>

<script>
export default {
  name: "ElRow",
  componentName: "ElRow",
  props: {
    // 布局模式，可选择flex
    type: String,
    // flex 布局下的水平排列方式
    justify: {
      type: String,
      default: "start",
    },
    // flex 布局下的垂直排列方式
    align: {
      type: String,
      default: "top",
    },
    //  自定义样式
    className: {
      type: String,
      default: "",
    },
    padding: String,
    margin: String,
    // 边框圆角
    radius: {
      type: String,
      default: "",
    },
    // 宽
    width: {
      type: String,
      default: "60px",
    },
    // 高度
    height: {
      type: String,
      default: "60px",
    },
    // 文字
    text: {
      type: String,
      default: "",
    },
  },
};
</script>

<style>
.el-row--flex {
  display: flex;
}
.el-row--flex.is-justify-center {
  justify-content: center;
}
</style>
